<!-- ifuner 制作 zhoupengfei@kaiheikeji.com  time: 2020-04-07 10:01:21-->
<template>
    <div class="login-container" :class="bgImg">
        <div class="auth-form" v-on:keyup.enter="handleEnter">
            <div class="logo"></div>
            <h3 class="login-title">{{$config.productName}}</h3>
            <!--<div class="version-container">-->
            <!--<MtEnv/>-->
            <!--</div>-->
            <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="0">
                <el-form-item prop="account">
                    <el-input clearable type="text" :placeholder="placeholder[type].account" v-model="ruleForm.account"
                              autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input clearable type="password" :placeholder="placeholder[type].password"
                              v-model="ruleForm.password"
                              autocomplete="off">
                    </el-input>
                </el-form-item>
            </el-form>

            <el-button class="login-btn" type="primary" @click="submitForm('ruleForm')">
                登录
            </el-button>
            <el-divider>其他登录方式</el-divider>
            <div class="oauth">
                <div class="oauth-bg" @click="oauth2LoginByDD(item)" v-for="item in ALL_LOGIN_THIRD"
                     v-bind:key="item.type">
                    <img :title="item.title"
                         :alt="item.type"
                         :src="item.icon"
                         class="oauth-btn">
                </div>
            </div>

            <div class="copy-right">
                <p>Copyright © 2019 振帮（深圳）信息科技有限公司</p>
                <a href="http://www.beian.miit.gov.cn/" target="_blank">粤ICP备19097400号-2</a>
            </div>
        </div>
    </div>
</template>
<style rel="stylesheet/scss" lang="scss">
    @import "Login.scss";
</style>
<script>
    const ALL_LOGIN_THIRD = [
        // {title: "github", type: "github", icon: "https://b-gold-cdn.xitu.io/v3/static/img/github.547dd8a.svg"},
        {title: "企业微信", type: "weChat", icon: "https://b-gold-cdn.xitu.io/v3/static/img/wechat.e0ff124.svg"},
        // {title: "微博", type: "sina", icon: "https://b-gold-cdn.xitu.io/v3/static/img/weibo.fa758eb.svg"},
        // {
        //     title: "钉钉扫码登录",
        //     type: "dingding",
        //     icon: "/static/img/dd_icon.svg"
        // },
    ]

    // import MtEnv from "_comp/MainLayout/components/MtEnv"

    export default {
        data() {
            return {
                ALL_LOGIN_THIRD,
                textType: "登录",
                type: "login",
                windowObjectReference: null,
                PreviousUrl: null,
                ruleForm: {
                    account: "",
                    password: "",
                },
                placeholder: {
                    login: {
                        account: "请输入中文名/手机号/企业邮箱",
                        password: "请输入密码"
                    }
                },
                rules: {
                    account: [
                        {required: true, message: "请输入中文名/手机号/企业邮箱～", trigger: "blur"}
                    ],
                    password: [
                        {required: true, message: "请输入密码~", trigger: "blur"}
                    ]
                }
            }
        },
        watch: {},
        computed: {
            bgImg() {
                return `bg-${parseInt(Math.random() * 6)}`
            }
        },
        components: {
            // MtEnv
        },
        created() {
        },
        mounted() {

        },
        methods: {
            handleEnter() {
                console.log("监听enter建")
                this.submitForm("ruleForm")
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.loginByAccount()
                    } else {
                        console.log("error submit!!")
                        return false
                    }
                })
            },
            oauth2LoginByDD(item) {
                switch (item.type) {
                    case "weChat":
                        this.qiyeWeChat()
                        break
                }
            },
            qiyeWeChat() {
                const {back_url = this.$config.homeRouterName} = this.$route.query
                window.location.href = `/login/oAuth2.html`
            },
            loginByAccount() {
                this.$store.dispatch("handleGetUserMsg").then(res => {
                    this.$router.push({name: this.$config.homeRouterName})
                })
                // const {account, password} = this.ruleForm
                // this.$http.post("POST_LOGIN_BY_ACCOUNT", {account, password}).then(res => {
                //     this.loginSuccess()
                // }).catch(err => {
                //     this.$message({
                //         message: err.msg,
                //         type: 'error'
                //     });
                // })
            },
            /**
             * 1. 登录成功返回的页面
             * 2. 收取local或者store实例中的返回参数
             * 3. 根据参数登录成功后跳转到对应的页面
             * */
            loginSuccess() {
                // 完成的
                console.log("loginSuccess")
                window.location.reload()
            },
            resetForm(formName) {
                this.$refs[formName].resetFields()
            }
        }
    }
</script>


